/**
 * MineAdmin is committed to providing solutions for quickly building web applications
 * Please view the LICENSE file that was distributed with this source code,
 * For the full copyright and license information.
 * Thank you very much for using MineAdmin.
 *
 * @Author X.Mo<root@imoi.cn>
 * @Link   https://github.com/mineadmin
 */
import type { MaProTableColumns, MaProTableExpose } from "@mineadmin/pro-table";
import type { UseDialogExpose } from "@/hooks/useDialog.ts";

import defaultAvatar from "@/assets/images/defaultAvatar.jpg";
import { ElTag, ElButton, ElTooltip } from "element-plus";
import { useMessage } from "@/hooks/useMessage.ts";
import { ResultCode } from "@/utils/ResultCode.ts";
import hasAuth from "@/utils/permission/hasAuth.ts";
import { deleteByIds } from "@/plugins/ai-warning/file/api/rdFileVoice.ts";
import AudioPlayer from "../components/AudioPlayer.vue";
import { AUDIO_TYPE_MAP } from "./common";

export default function getTableColumns(
  dialog: UseDialogExpose,
  formRef: any,
  t: any
): MaProTableColumns[] {
  const msg = useMessage();

  return [
    {
      type: "selection",
      showOverflowTooltip: false,
      label: () => t("crud.selection"),
    },
    {
      label: "文件内容",
      prop: "text",
      align: "center",
      width: 350,
      cellRender: ({ row }) => {
        const text = row.text || "无内容";
        const maxLength = 40; // 最大显示字符数
        const isLongText = text.length > maxLength;
        const displayText = isLongText
          ? text.substring(0, maxLength) + "..."
          : text;

        if (isLongText) {
          return (
            <ElTooltip
              content={text}
              placement="top"
              showAfter={300}
              popperStyle={{ maxWidth: "400px", wordBreak: "break-word" }}
            >
              <div
                style="
                max-width: 230px; 
                word-break: break-word; 
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
                cursor: pointer;
                line-height: 1.4;
              "
              >
                {displayText}
              </div>
            </ElTooltip>
          );
        }

        return (
          <div
            style="
            max-width: 230px; 
            word-break: break-word; 
            line-height: 1.4;
          "
          >
            {displayText}
          </div>
        );
      },
    },
    {
      label: "语音文件",
      prop: "file",
      width:100,
      align: "center",
      cellRender: ({ row }) => {
        if (!row.file) {
          return <span style="color: #999;">无音频文件</span>;
        }

        return (
          <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
            <AudioPlayer
              audioUrl={row.file}
              fileName={row.file.split("/").pop() || "音频文件"}
            />
          </div>
        );
      },
    },
    {
      label: "音频类型",
      prop: "type",
      width: 100,
      align:"center",
      cellRender: ({ row }) => {
        const typeInfo = AUDIO_TYPE_MAP[row.type] || {
          text: "未知类型",
          type: "info",
        };
        return <ElTag type={typeInfo.type}>{typeInfo.text}</ElTag>;
      },
    },
    {
      type: "operation",
      label: () => t("crud.operation"),
      operationConfigure: {
        actions: [
          {
            name: "edit",
            icon: "material-symbols:person-edit",
            show: ({ row }) => hasAuth("file:rdFileVoice:update"),
            text: () => t("crud.edit"),
            onClick: ({ row }) => {
              dialog.setTitle(t("crud.edit"));
              dialog.open({ formType: "edit", data: row });
            },
          },
          {
            name: "del",
            icon: "mdi:delete",
            text: () => t("crud.delete"),
            show: ({ row }) => hasAuth("file:rdFileVoice:delete"),
            onClick: ({ row }, proxy: MaProTableExpose) => {
              msg.delConfirm(t("crud.delDataMessage")).then(async () => {
                const response = await deleteByIds([row.id]);
                if (response.code === ResultCode.SUCCESS) {
                  msg.success(t("crud.delSuccess"));
                  proxy.refresh();
                }
              });
            },
          },
        ],
      },
    },
  ];
}
